<template>
  <div class="cl">
    <el-empty description="暂无商品" v-show="CartNull"></el-empty>
    <el-row class="Thead" v-show="isCartNull">
      <el-col :span="8">已选择的商品</el-col>
      <el-col :span="4">数量</el-col>
      <el-col :span="2">原价</el-col>
      <el-col :span="2">优惠</el-col>
      <el-col :span="2">小计</el-col>
      <el-col :span="5">操作</el-col>
    </el-row>
    <div class="cn" v-show="isCartNull">
      <template v-for="(good, index) in cart">
        <div class="line" :key="index"></div>
        <el-row class="Thead TRow" :key="index">
          <el-col :span="8">
            <img :src="good.img[0]" alt="" class="img" />
            <div class="gname">
              {{ good.name }}<br />
              <div class="gcolor">颜色/默认</div>
            </div>
          </el-col>
          <el-col :span="4" class="jz">
            <el-input-number
                size="mini"
                v-model="good.num"
                :min="1"
            ></el-input-number>
          </el-col>
          <el-col :span="2">￥{{ good.price }}.00</el-col>
          <el-col :span="2">0.00</el-col>
          <el-col :span="2">￥{{ good.num * good.price }}.00</el-col>
          <el-col :span="5">
            移入收藏夹 / <span class="del" @click="removeFromCart">删除</span>
          </el-col>
        </el-row>
      </template>
    </div>
    <div class="down-tip" v-show="isCartNull">
      <div class="line"></div>
      <div class="Ypay">运费：包邮</div>
      <div class="total0">
        商品金额：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{
          total
        }}
      </div>
      <div class="total1">总金额</div>
      <div class="total2">￥{{ total }}.00</div>
      <div class="black-red">
        <div class="black">继续购物</div>
        <div class="red">下单结算</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data: function () {
    return {
      // isCartNull:true
    };
  },
  computed: {
    ...mapState(["cart"]),
    total: function () {
      var total = 0;
      this.cart.forEach((element) => {
        total += element.num * element.price;
      });
      return total;
    },
    CartNull:function(){
      console.log(this.cart);
      return this.cart.length === 0
    },
    isCartNull:function(){
      return this.cart.length !== 0
    }
  },
  methods: {
    ...mapMutations(["removeFromCart"]),
  },
};
</script>

<style scoped>
.Thead {
  color: rgb(114, 114, 114);
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  position: relative;
  top: 70px;
}
.TRow {
  font-size: 15px;
  line-height: 90px;
  height: 100px;
  position: relative;
  top: 0;
}
.gname {
  position: relative;
  letter-spacing: 1px;
  text-align: left;
  line-height: 20px;
  width: 160px;
  height: 0px;
  top: -130px;
  left: 330px;
  color: #000;
  text-decoration-line: underline;
}
.gcolor {
  letter-spacing: 0;
  font-size: 13px;
  color: rgb(83, 83, 83);
}
.cl {
  width: 1650px;
  position: absolute;
  top: 250px;
  left: 130px;
}
.cn {
  overflow: auto;
  height: 500px;
  position: relative;
  top: 80px;
}
.img {
  width: 95px;
  height: 95px;
}
.line {
  width: 85%;
  position: relative;
  left: 8%;
  top: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  border-top: 1px solid gainsboro;
}
.del:hover {
  color: #d6000f;
  cursor: pointer;
}
.down-tip {
  position: relative;
  top: 10px;
}
.black-red {
  width: 85%;
  height: 45px;
  position: relative;
  top: 70px;
  left: 8%;
}
.black {
  position: absolute;
  left: 0;
  width: 76%;
  background: #000;
  height: 45px;
  line-height: 45px;
  color: #fff;
  font-weight: bold;
  text-align: right;
  padding-right: 70px;
}
.red {
  position: absolute;
  right: 0;
  width: 20%;
  background: #c8192e;
  height: 45px;
  line-height: 45px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.Ypay {
  position: absolute;
  left: 8%;
  font-size: 14px;
  color: rgb(131, 131, 131);
}
.total0 {
  position: absolute;
  right: 160px;
  font-size: 13px;
  color: rgb(117, 117, 117);
}
.total1 {
  position: absolute;
  right: 260px;
  top: 50px;
  font-size: 20px;
  color: rgb(117, 117, 117);
  font-weight: bold;
}
.total2 {
  position: absolute;
  right: 130px;
  top: 49px;
  color: #d6000f;
  font-size: 23px;
  font-weight: bolder;
  font-family: "黑体", "microsoft yahei";
}
</style>

<style>
</style>